<template>
  <div ref="echartLineRef" style="height: 100%;width: 100%;"></div>
</template>

<script setup>
import {inject, onMounted, onUnmounted, ref} from "vue";
import * as echarts from "echarts";
import {AXIOS_NAME} from "@/constant/constant.js";

const echartLineRef = ref(null);
const $axios = inject(AXIOS_NAME);

let lineChart;
let interval;

onMounted(() => {
  lineChart = echarts.init(echartLineRef.value);
  getEchartData();
});
onUnmounted(() => {
  if (interval) {
    clearInterval(interval);
  }
});
const getEchartData = () => {
  $axios.post("/monitor/getLinuxBaseInfo", {}).then(response => {
    const data = response.data;
    console.log(data);
    if (data.code != 1 || data.data.length <= 0) {
      return;
    }
    const lastData = data.data[0];
    handleLineEchart(data.data);
  });
}

const handleLineEchart = (data) =>{
  let xAxis = [];
  let revData = [];
  let senData = [];
  data.forEach( (item,index) => {
    xAxis.push((index + 1) + "s");
    revData.push(item.networkIn);
    senData.push(item.networkOut);
  });
  let options  = {
    title: {
      text: '流量'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['异常包数', '正常包数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value',
      axisLabel: { //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
        formatter: '{value} kB/s'
      }
    },
    series: [
      {
        name: '异常包数',
        type: 'line',
        stack: 'Total',
        data: revData
      },
      {
        name: '正常包数',
        type: 'line',
        stack: 'Total',
        data: senData
      },
    ]
  };
  lineChart.setOption(options);
}

</script>

<style scoped>

</style>